<template>
	<view class="container">
		<view class="user_info_wrap">
			<image class="user_avatar" :src="userInfo.url"></image>
			<view @click="toEditInfo">
				<text>{{userInfo.uname}}</text>
				<image style="width: 12px;height: 12px;margin-left: 6px;" src="/static/image/edit.png"></image>
			</view>
		</view>
		<view class="m_title_two">
			<image class="m_title_img" src="../../static/image/title_order.png"></image>
		</view>
		<view class="tool_wrap">
			<view class="tool_icon" @click="toOrder">
				<image style="width: 30px;height: 30px;margin-bottom: 6px;" src="/static/image/icon_01.png"></image>
				<text style="font-size: 12px;">全部订单</text>
			</view>
			<view class="tool_icon">
				<image style="width: 30px;height: 30px;margin-bottom: 6px;" src="/static/image/icon_02.png"></image>
				<text style="font-size: 12px;">待付款</text>
			</view>
			<view class="tool_icon">
				<image style="width: 30px;height: 30px;margin-bottom: 6px;" src="/static/image/icon_03.png"></image>
				<text style="font-size: 12px;">待付款</text>
			</view>
			<view class="tool_icon">
				<image style="width: 30px;height: 30px;margin-bottom: 6px;" src="/static/image/icon_04.png"></image>
				<text style="font-size: 12px;">已完成</text>
			</view>
			<view class="tool_icon">
				<image style="width: 30px;height: 30px;margin-bottom: 6px;" src="/static/image/icon_05.png"></image>
				<text style="font-size: 12px;">退款/售后</text>
			</view>
		</view>
		<view class="line"></view>
		<image style="width: 100%;height: 94px;" src="/static/image/invite.png" mode=""></image>
		<view class="m_title_two">
			<image class="m_title_img_tuijian" src="/static/image/title_tuijan.png"></image>
		</view>
		<uni-list>			
			<uni-list-item title="卡券包" showArrow />
			<uni-list-item title="新蚁团长" clickable showArrow @click="toXinyi" />
            <uni-list-item title="管理提货人" showArrow />
			<uni-list-item title="关于我们" clickable showArrow @click="toAbout" />
			<uni-list-item title="联系我们" showArrow />
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
           return {
			   userInfo: null,
		   }
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo && userInfo.openId) {
				this.userInfo = userInfo
			}
		},
		methods: {
			toOrder() {
				uni.navigateTo({
					url: '/pages/order/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			toEditInfo() {
				uni.navigateTo({
					url: '/pages/editInfo/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			toAbout() {
				uni.navigateTo({
					url: '/pages/about/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			toXinyi() {
				uni.navigateTo({
					url: '/pages/xinyiHead/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			}
		}
	}
</script>

<style>
page {
	background: #ffffff;
}
.container {
	padding: 0 15px;
	box-sizing: border-box;
}
.user_info_wrap {
	width: 100%;
	margin: 12px 0 30px 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.user_avatar {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	margin-bottom: 8px;
}
.m_title_two {
	margin: 30px auto 16px;
	text-align: center;
}
.m_title_img {
	width: 60px;
	height: 50px;
}
.m_title_img_tuijian {
	width: 110px;
	height: 50px;
}
.tool_wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.tool_icon {
	width: calc((100% - 120px) / 5);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.line {
	width: 100%;
	margin: 20px auto;
	height: 1px;
	box-sizing: border-box;
	background: #EFEFEF;
}
</style>
